{% extends "base.html" %}

{% block title %}User Management{% endblock %}

{% block content %}
    {% if error %}
        <p style="color: red;">{{ error }}</p>
    {% endif %}
    {% if message %}
        <p style="color: green;">{{ message }}</p>
    {% endif %}
    <h2>User List</h2>
    <form method="post">
        <div class="form-group">
            <label for="username">Username:</label>
            <input type="text" id="username" name="username" required>
        </div>
        <div class="form-group">
            <label for="password">Password:</label>
            <input type="password" id="password" name="password" required>
        </div>
        <button type="submit" name="add_user">Add User</button>
    </form>
    <table border="1" width="100%">
        <tr>
            <th>Username</th>
            <th>Status</th>
            <th>Action</th>
        </tr>
        {% for user_id, username, password, status in users %}
            <tr>
                <td>{{ username }}</td>
                <td style="color: {% if username in online_usernames %}darkblue{% else %}gray{% endif %};">{{ status }}</td>
                <td>
                    <form method="post" style="display: inline;">
                        <input type="hidden" name="update_user" value="{{ user_id }}">
                        <input type="text" name="username" value="{{ username }}" placeholder="New Username">
                        <input type="password" name="password" placeholder="New Password">
                        <button type="submit">Update</button>
                    </form>
                    <form method="post" style="display: inline;">
                        <input type="hidden" name="delete_user" value="{{ user_id }}">
                        <button type="submit" onclick="return confirm('Are you sure you want to delete this user?')">Delete</button>
                    </form>
                </td>
            </tr>
        {% endfor %}
    </table>
{% endblock %}